<template>
  <div class="outside-hospital-receivable">
    <el-container class="receivable-box">
      <el-header height="auto">
        <!-- <div class="tabs-box">
          <tabs :tabs-arr="financialRecicableTabs" @returnIndex="handleTabChange" />
        </div> -->
        <SearchForm
          label-width="84px"
          :data="wholesaledata"
          @searchForm="searchForm"
          @resetForm="resetForm"
          :submit-loading='submitLoading'
        />
      </el-header>
      <!-- 列表模块 -->
      <el-editable
        v-loading="tableLoading"
        :data="dataList"
        height="300"
        :columns="releasecolumnsList"
      >
        <template
          slot="default-num"
          slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
        <template
          slot="default-receiptStatus"
          slot-scope="scope">
          <span>{{ scope.row.receiptStatus === 0 ? '待收款' : '已收款' }}</span>
        </template>
        <!-- 收款 -->
        <template
          slot="default-action"
          slot-scope="scope">
          <el-button
            v-if="scope.row.receiptStatus === 0"
            size="small"
            @click.stop="toDetails(scope.row)"
            type="text text-primary"
          >收款</el-button>
          <el-button
            v-if="scope.row.receiptStatus === 1"
            size="small"
            @click.stop="toDetails(scope.row)"
            type="text text-primary"
          >详情</el-button>
        </template>
      </el-editable>
      <!-- 分页 -->
      <el-pagination
        align="right"
        style="margin-top:20px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-size="page.size"
        :page-sizes="PAGE_NUMBER"
        :layout="PAGINATION_LAYOUT"
        :total="page.total"
      />
    </el-container>
  </div>
</template>
<script>
import paginationMixin from '@mixins/paginationMixin'
import { wholesaledata, releasecolumnsList, financialRecicableTabs } from './const'
import { hasIn, cloneDeep } from 'lodash'
import SearchForm from '@components/businesscomponents/search'
import ElEditable from '@components/el-editable'
import tabs from '@components/tabs/index.vue'

import { receivableList } from '@const/beforeSettleApi'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
export default {
  components: { ElEditable, SearchForm, tabs },
  mixins: [paginationMixin],
  data () {
    return {
      financialRecicableTabs,
      tableLoading: false,

      wholesaledata,
      searchFormData: {},
      dataList: [],
      releasecolumnsList,
      submitLoading: false,
      PAGE_NUMBER, // 页码
      PAGINATION_LAYOUT // 分页功能
    }
  },
  created () {
    this.getData()
  },
  methods: {
    handleTabChange () {

    },
    // 跳转到详情页
    toDetails (e) {
      let url =
        '/distributorSide/financialManagement/receivable/read'
      let data = {
        id: e.id
      }
      this.$router.push({
        path: url,
        query: data
      })
    },
    // 获取列表数据
    getData () {
      this.submitLoading = true
      this.tableLoading = true
      let url = receivableList
      this.$axios
        .$post(url, {
          ...this.searchFormData,
          page: this.page.page,
          pageSize: this.page.size
        })
        .then(res => {
          this.dataList = hasIn(res, 'payload.content')
            ? res.payload.content
            : []
          this.page.total = hasIn(res, 'payload.totalElements')
            ? res.payload.totalElements
            : 0
        })
        .finally(res => {
          this.tableLoading = false
          this.submitLoading = false
        })
    },
    // 搜索功能-点击查询
    searchForm (condition) {
      this.page.page = 1
      this.searchFormData = condition
      this.getData()
    },
    // 搜索功能-点击重置
    resetForm (condition) {
      this.conditionjson = condition
    },
    // 分页
    handleSizeChange (size) {
      this.page.size = size
      this.getList()
    },
    handleCurrentChange (curPage) {
      this.page.page = curPage
      this.getList()
    }
  }
}
</script>
<style lang="less" scoped>
.outside-hospital-receivable {
  .tabs-box {
    margin-top: 10px;
  }
  .receivable-box {
    height: 100%;
    overflow: auto;
  }
}
</style>
